<template>
	<view>
		<!-- 社区卡片 -->
		<view class="wrap" v-for="(item,index) in list" :key="index" v-if="type == 1" @click="replyBar">
			<view class="top">
				<view class="left">
					<view class="active">
						<u-avatar :src="item.nameUrl"></u-avatar>
					</view>
					<view class="activeTitle">
						<view>{{item.name}}</view>
						<view>{{$u.timeFormat(item.timestamp, 'yyyy年mm月dd日')}}</view>
					</view>
				</view>
				<view class="right">
					<view>
						<!-- <u-tag text="+关注" mode="dark" @click="TagBar" /> -->
					</view>
				</view>
			</view>
			<view class="center">
				<view class="title">{{item.info}}</view>
				<view class="image">
					<view class="left">
						<u-image width="420" height="400" border-radius="10" :src="item.imageList[0].image"></u-image>
					</view>
					<view class="right">
						<view>
							<u-image width="250rpx" height="195rpx" border-radius="10" :src="item.imageList[1].image">
							</u-image>
						</view>
						<view>
							<u-image width="250rpx" height="195rpx" border-radius="10" :src="item.imageList[2].image">
							</u-image>
						</view>
					</view>
				</view>
				<view class="bottom">
					<!-- <u-icon :name="timeStu == false?'heart-fill':'heart'" :color="timeStu == false?'#fa3534':'#82848a'" size="40"
					 :label="count" margin-left="5" label-color="#82848a" @click="tagColor(index)"></u-icon>
					<u-icon name="chat" color="#82848a" size="40" label="50" margin-left="5" label-color="#82848a" @click="replyBar"></u-icon> -->
				</view>
			</view>
		</view>
		<!-- 评论卡片 -->
		<view class="wrap" v-for="(item,index) in list" :key="index" v-if="type == 2">
			<view class="top">
				<view class="left">
					<view class="active">
						<u-avatar :src="item.nameUrl"></u-avatar>
					</view>
					<view class="activeTitle">
						<view>{{item.name}}</view>
						<view>{{$u.timeFormat(item.timestamp, 'yyyy年mm月dd日')}}</view>
					</view>
				</view>
				<view class="right">
					<view>
						<button open-type="share">
							<u-icon custom-prefix="fish-icon" name="fenxiang1" color="#82848a" size="40"></u-icon>
						</button>
					</view>
				</view>
			</view>
			<view class="main">
				<view class="swiper">
					<u-swiper :list="item.imageList" height="450" border-radius="0" indicator-pos="bottomRight"
						mode="number" :autoplay="false"></u-swiper>
				</view>
				<view class="title">{{item.info}}</view>
			</view>
		</view>
		<!-- 获赞卡片 -->
		<view class="praise-wrap" v-for="(item,index) in list" :key="index" v-if="type == 3" @click="praiseBar">
			<view class="praise-top">
				<view class="left">
					<view class="active">
						<u-avatar :src="item.nameUrl"></u-avatar>
					</view>
					<view class="activeTitle">
						<view>{{item.name}} <text>赞了你的作品</text></view>
						<view>{{$u.timeFormat(item.timestamp, 'yyyy年mm月dd日')}}</view>
					</view>
				</view>
				<view class="right">
					<view class="works">
						<u-image width="120" height="120" :src="item.imageList[0].image" border-radius="7"></u-image>
					</view>
				</view>
			</view>
		</view>

		<!-- 单张横向名片类卡片 -->
		<view class="single" v-if="type == 4">
			<view class="main " v-for="(item,index) in list" :key="index" @click="replyBar(item.ticket_id)">
				<view class="left">
					<image :src="item.thumb" mode=""></image>
				</view>
				<view class="center">
					<view>{{item.ticket_name}}</view>
					<u-tag v-for="(it,ind) in item.tips" :key="ind" :text="it" mode="dark" size="mini" />
					<view class="contains" v-if="item.contains">{{item.contains}}</view>
				</view>
				<view class="right">
					<view class="right-box">
						<view class="top">
							<view><text>￥</text>{{item.price}}</view>
						</view>
						<view class="footer">
							<view class="">立即预订</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 无图片样式 -->
		<view class="text" v-if="type == 5">
			<view style="width: 100%;" class="main" v-if="list.length==0">
				<view
					style="width: 100%;height: 240rpx;;flex-direction: column;;display: flex;align-items: center;justify-content: center;padding-bottom:40rpx;">
					<image src="@/static/emty.png" mode=""
						style="width: 120rpx;height: 100rpx;border-radius: 8rpx;"></image>
					<view style="color:#909ca8;text-align: center;">
						暂无门票数据
					</view>
				</view>
			</view>
			<block v-else>
				<view class="main " v-for="(item,index) in list" :key="index">
					<view class="center">
						<view>{{item.ticket_name}}</view>
						<u-tag v-for="(it,ind) in item.tips" :key="ind" :text="it" mode="dark" size="mini" />
						<view class="contains" v-if="item.contains">{{item.cheaper}}</view>
						<view style="color: #2979ff;font-size: 14px;margin-top: 20rpx;" @click="openPpayTipsShow(index)">
							购买须知
						</view>
					</view>
					<view class="right">
						<view class="right-box"  @click="replyBar(item.ticket_id)">
							<view class="top">
								<text style="font-size: 14px;">￥</text>
								<text style="font-size: 20px;font-weight: 700;">{{ parseInt(item.discounts) }} </text>
								<text style="color:#848484;margin: 2px;font-size: 13px;">起</text>
								<text
									style="color:#848484;font-size: 13px;text-decoration: line-through;">￥{{ parseInt(item.price) }}</text>
							</view>
							<view class="footer">
								立即预订
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
		<u-popup v-model="payTipsShow" mode="bottom" height="800rpx" width="100%" safe-area-inset-bottom>
			<view style="padding: 20rpx;">
				<view style="font-weight: 800;line-height: 60rpx;font-size: 16px;text-align: center;">预定须知</view>
				{{garden}}
			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		created(e) {
			console.log(e)
		},
		data() {
			return {
				count: 3000,
				timeStu: true,
				payTipsShow:false,
				garden:''
			};
		},
		props: {
			type: {
				type: Number
			},
			// 卡片状态 -1 正常 
			cardType: {
				type: Number
			},
			list: {
				type: Array,
				default: function() {
					return []
				}
			},
		},
		methods: {
			openPpayTipsShow(idx){
				this.payTipsShow = true
				this.garden = this.list[idx].garden
				console.log(this.list[idx].garden);
			},
			TagBar() {
				console.log("关注了")
			},
			replyBar(e) {
				this.$emit('replyBar', e);
			},
			// 获赞卡片
			praiseBar() {
				this.$emit('praiseBar');
			},
			// 点赞
			tagColor(ev) {
				this.timeStu = !this.timeStu
				this.timeStu ? this.count-- : this.count++
				console.log(this.timeStu)
			}

		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 20rpx;

		// 头部
		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				padding: 20rpx;
				align-items: center;

				.active {}

				.activeTitle {
					margin: 0 20rpx;

					view {
						padding: 5rpx 0;
						font-size: 30rpx;

						&:nth-child(2) {
							font-size: 25rpx;
							color: #bdc3c7;
						}
					}
				}

			}

			.right {

				display: flex;
				align-items: center;
				margin-right: 30rpx;
				justify-content: center;

				button {
					margin: 0 auto;
					padding: 0;
					outline: none;
					border-radius: 0;
					line-height: inherit;
					box-shadow: none;
					background-color: transparent;

					&:after {
						border: none;
					}
				}
			}
		}

		// 中间部分
		.center {
			padding: 0 10rpx;

			.title {
				padding: 0 10rpx;
			}

			.image {
				background-color: #ffffff;
				width: 100%;
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.left {}

				.right {
					view {
						margin: 10rpx 0;
					}
				}
			}

			.bottom {
				display: flex;
				justify-content: flex-end;
				padding-bottom: 20rpx;

				u-icon {
					margin: 0 30rpx;
				}
			}
		}

		// 卡片二
		.main {
			.title {
				font-size: 30rpx;
				padding: 20rpx;
				text-align: left;
			}

			.bottom {
				display: flex;
				justify-content: flex-end;
				padding-bottom: 20rpx;

				u-icon {
					margin: 0 30rpx;
				}
			}
		}

	}

	.praise-wrap {
		margin-bottom: 7rpx;
		background-color: #FFFFFF;

		// 获赞卡片
		.praise-top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				padding: 20rpx;
				align-items: center;

				.active {}

				.activeTitle {
					margin: 0 20rpx;

					view {
						padding: 5rpx 0;
						color: #2b85e4;
						font-size: 25rpx;

						&:nth-child(2) {
							font-size: 25rpx;
							color: #bdc3c7;
						}

						text {
							color: #303133;
							margin-left: 10rpx;
							font-size: 25rpx;
						}
					}
				}

			}

			.right {
				padding: 20rpx;
			}
		}
	}

	// 单张卡片 名片
	.single {
		margin: 0 auto;
		padding: 0 20rpx;

		.main {
			margin: 10rpx 0;
			padding: 20rpx;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			border-radius: 10rpx;

			.left {
				display: flex;
				align-items: center;

				image {
					border-radius: 10rpx;
					height: 180rpx;
					width: 180rpx;
				}
			}

			.center {
				padding: 0 20rpx;
				width: 60%;

				view {
					padding: 5rpx 0;
				}
			}

			.right {
				border-radius: 10rpx;
				// height: 100%;
				display: flex;
				align-items: center;

				.right-box {
					padding: 20rpx 0;
					width: 150rpx;
					color: #FFFFFF;

					.top {
						border-radius: 10rpx 10rpx 0 0;
						padding: 10rpx;
						line-height: 60rpx;
						background-color: #f1f2f6;

						view {
							color: #d63031;
							font-size: 35rpx;

							text {
								font-size: 23rpx;
							}
						}
					}

					.footer {
						padding: 5rpx;
						font-size: 26rpx;
						text-align: center;
						background-color: #eaa530;
						border-radius: 4rpx;
					}
				}
			}
		}
	}

	.text {
		border-radius: 10rpx;
		margin: 20rpx;

		.main {
			background-color: #FFFFFF;
			margin: 20rpx 0;
			padding: 16rpx;
			display: flex;
			justify-content: space-between;
			border-radius: 10rpx;

			.center {
				padding: 0 20rpx;
				width: 60%;
				font-size: 16px;

				view {
					padding: 5rpx 0;
				}
			}

			.right {
				width: 40%;
				display: flex;
				justify-content: center;
				align-items: center;

				.right-box {
					padding: 20rpx 0;
					width: 100%;
					color: #FFFFFF;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;

					.top {
						padding: 10rpx;
						line-height: 60rpx;
						color: #d63031;
					}

					.footer {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 26rpx;
						height: 30px;
						width: 100px;
						background-color: #eaa530;
						border-radius: 4px;
					}
				}
			}
		}
	}
</style>
